/*
 * @Author: caijw 
 * @Date: 2018-11-11 13:14:20 
 * @Last Modified by: caijw
 * @Last Modified time: 2019-01-10 22:52:42
 * 
 * 积分充值
 */

import React, { Component } from 'react';
import Header from '../../../../components/Header/RecordHeader';
import ToastUi from '../../../../components/Toast/Toast';
import { Toast, Toptips } from 'react-weui';
import '../../../../static/css/weui.less';
import { connect } from "react-redux";
import * as actions from '../../../../store/action/my';
import '../../../../static/css/common.less';
import './recharge.less';

class Recharge extends Component {

    coupon_card_pub_key = React.createRef();
    coupon_card_pri_key = React.createRef();
    
    //es7 的写法
    state = {
        sign : {
            display : 'none'
        },
        showToast : {
            show : false,
        }
    }


    //提交
    submit = (e) =>{
        e.preventDefault();
        let coupon_card_pub_key = this.coupon_card_pub_key.current.value;
        let coupon_card_pri_key = this.coupon_card_pri_key.current.value;
        let data = {coupon_card_pub_key:coupon_card_pub_key,coupon_card_pri_key:coupon_card_pri_key}
        this.props.postCardNumber(data); 

    }

    componentWillReceiveProps(){
        setTimeout(()=>{
            if(this.props.my.cardRet == 0){
                this.setState({sign : {display : 'block' }});
            }else{
                if(this.props.my.cardRetMsg){
                    this.setState({showToast: {show: true}});
                    this.state.toastTimer = setTimeout(()=> {
                        this.setState({showToast: {show: false}});
                    }, 2000);
                }
            }
        },100)
    }
     //隐藏充值记录
    hideSign = () =>{
        this.setState({sign : {display : 'none' }});
    }
    
    render() {
        return (
            <div>
                <Toast icon="loading" show={this.props.my.fetching}>Loading...</Toast>
                {/* <Toptips type="info" show={this.state.showToast.show}>{this.props.my.cardRetMsg}</Toptips> */}
                <div className="detail-region">
                    <Header title="积分充值"></Header>
                    <section class="content">
                      <div className="margin-t40"></div>
                      <div className="sumbit-item">
                            <div class="submit-item-title submit-card">充值卡号:</div>
                            <input type="text" placeholder="请输入充值卡号" ref={this.coupon_card_pub_key} id="coupon_card_pub_key" required></input>
                       </div>
                       <div className="sumbit-item">
                            <div class="submit-item-title">充值卡密码：</div>
                            <input type="text" placeholder="请再次充值卡密码" ref={this.coupon_card_pri_key} id="coupon_card_pri_key"></input>
                       </div>
                       <button className="submit-btn" onClick={this.submit}>保存</button>
                    </section>
                </div>
                <div className="success-region" style={this.state.sign}>
                    <div className="success-content">
                        <img src="./src/static/images/recharge.png"></img>
                        <div className="success-info">充值成功</div>
                        <div className="success-confirm" onClick={this.hideSign}>确认</div>
                    </div>
                    <div className="success-close"><img src="./src/static/images/close.png"  onClick={this.hideSign}></img></div>
                </div>
            </div>
        )
    }
}

//把组件和store关联在一起
export default connect((state)=>{return {...state}}, actions)(Recharge);